<template>
  <div class="my-card-header page-body">
    <h2 class="fs-xl">
      <strong class="card-header-h2">{{ title }}</strong>
    </h2>
    <slot></slot>
    <show-more :href="href" :isMoreBtn="isMoreBtn" v-if="!isNotNeedMore" />
  </div>
</template>

<script>
import ShowMore from '../components/ShowMore'
export default {
  props: ['title', 'isNotNeedMore', 'isMoreBtn', 'href'],
  setup (props) { },
  components: {
    ShowMore
  }
}
</script>

<style lang="scss" scoped>
.my-card-header {
  h2 {
    text-align: center;
    margin: 60px 0 35px;
    position: relative;
    .card-header-h2 {
      position: relative;
      padding: 0 20px;
      background: #fff;
      z-index: 222;
    }
    &:after {
      content: '';
      position: absolute;
      height: 1px;
      background: #efefef;
      left: 0;
      width: 100%;
      top: 13px;
    }
  }
}
</style>
